<script module lang="ts">
    import { defineMeta } from "@storybook/addon-svelte-csf";
    import Select from "./Select.svelte";
    import { fn } from "storybook/test";
    import { Space } from "../Space";
    import { Button } from "../Button";
    import Icon from "@iconify/svelte";
    import { Avatar } from "../Avatar";
    import { BothSide } from "../BothSide";
    import { useStyle } from "../utils/useStyle";
    import { Link } from "../Typography";
    import { message } from "../Message";

    const { Story } = defineMeta({
        title: "Components/Form/Select",
        component: Select,
        tags: ["autodocs"],
        argTypes: {},
        args: {},
    });

    let filterData = $state<any>([]);
    let loading = $state(false);
    let remoteQuery = (query: string) => {
        loading = true;
        filterData = new Array(10).fill(0).map((_, index) => ({ value: query + index, label: query + index }));
        loading = false;
    };
    let filterData2 = $state<any>([]);
    let loading2 = $state(false);
    let remoteQuery2 = async (query: string) => {
        loading2 = true;
        await new Promise((resolve) => setTimeout(resolve, 2000));
        filterData2 = new Array(10).fill(0).map((_, index) => ({ value: query + index, label: query + index }));
        loading2 = false;
    };
    const largeArray = new Array(1000).fill(0).map((_, index) => ({
        value: index,
        label: `${
            new Array(1 + Math.round(Math.random() * 20))
                .fill(true)
                .map(() => "Row")
                .join(" ") + index
        }`,
    }));
</script>

<Story name="Default">
    {#snippet template(args)}
        <Select
            data={[
                { label: "北京", value: "1" },
                { label: "上海", value: "2" },
                { label: "杭州", value: "3" },
                { label: "深圳", value: "4" },
                { label: "广州", value: "5" },
            ]}
        />
    {/snippet}
</Story>

<Story name="Multi">
    {#snippet template(args)}
        <Select
            multi
            data={[
                { label: "北京", value: "1" },
                { label: "上海", value: "2" },
                { label: "杭州", value: "3" },
                { label: "深圳", value: "4" },
                { label: "广州", value: "5" },
            ]}
        />
    {/snippet}
</Story>

<Story name="Disabled">
    {#snippet template(args)}
        <Select
            disabled
            data={[
                { label: "北京", value: "1" },
                { label: "上海", value: "2" },
                { label: "杭州", value: "3" },
                { label: "深圳", value: "4" },
                { label: "广州", value: "5" },
            ]}
        />
    {/snippet}
</Story>

<Story name="Size">
    {#snippet template(args)}
        <Space>
            <Select
                size="large"
                data={[
                    { label: "北京", value: "1" },
                    { label: "上海", value: "2" },
                    { label: "杭州", value: "3" },
                    { label: "深圳", value: "4" },
                    { label: "广州", value: "5" },
                ]}
            />
            <Select
                data={[
                    { label: "北京", value: "1" },
                    { label: "上海", value: "2" },
                    { label: "杭州", value: "3" },
                    { label: "深圳", value: "4" },
                    { label: "广州", value: "5" },
                ]}
            />
            <Select
                size="small"
                data={[
                    { label: "北京", value: "1" },
                    { label: "上海", value: "2" },
                    { label: "杭州", value: "3" },
                    { label: "深圳", value: "4" },
                    { label: "广州", value: "5" },
                ]}
            />
        </Space>
    {/snippet}
</Story>

<Story name="Clearable" args={{ clearable: true }}>
    {#snippet template(args)}
        <Select
            {...args}
            data={[
                { label: "北京", value: "1" },
                { label: "上海", value: "2" },
                { label: "杭州", value: "3" },
                { label: "深圳", value: "4" },
                { label: "广州", value: "5" },
            ]}
        />
    {/snippet}
</Story>

<Story name="ShowMax" args={{ clearable: true, showMax: 2 }}>
    {#snippet template(args)}
        <Select
            {...args}
            multi
            data={[
                { label: "北京", value: "1" },
                { label: "上海", value: "2" },
                { label: "杭州", value: "3" },
                { label: "深圳", value: "4" },
                { label: "广州", value: "5" },
            ]}
        />

        <div style="width: 200px">
            <Select
                {...args}
                multi
                showMax="auto"
                data={[
                    { label: "北京", value: "1" },
                    { label: "上海", value: "2" },
                    { label: "杭州", value: "3" },
                    { label: "深圳", value: "4" },
                    { label: "广州", value: "5" },
                ]}
            />
        </div>
    {/snippet}
</Story>

<Story name="Max" args={{ clearable: true, max: 2 }}>
    {#snippet template(args)}
        <Select
            {...args}
            multi
            onExceed={() => {
                message.warning({
                    content: "超出限制",
                    stack: true,
                });
            }}
            data={[
                { label: "北京", value: "1" },
                { label: "上海", value: "2" },
                { label: "杭州", value: "3" },
                { label: "深圳", value: "4" },
                { label: "广州", value: "5" },
            ]}
        />
    {/snippet}
</Story>

<Story name="ValueClosable" args={{ clearable: true, valueClosable: true }}>
    {#snippet template(args)}
        <Select
            {...args}
            multi
            data={[
                { label: "北京", value: "1" },
                { label: "上海", value: "2" },
                { label: "杭州", value: "3" },
                { label: "深圳", value: "4" },
                { label: "广州", value: "5" },
            ]}
        />
    {/snippet}
</Story>

<Story name="Group" args={{ clearable: true, valueClosable: true }}>
    {#snippet template(args)}
        <Select
            {...args}
            data={[
                {
                    label: "直辖市",
                    value: "0",
                    children: [
                        { label: "北京", value: "1" },
                        { label: "上海", value: "2" },
                    ],
                },
                { label: "浙江", value: "3", children: [{ label: "杭州", value: "31" }] },
                { label: "深圳", value: "4" },
            ]}
        />
    {/snippet}
</Story>

<Story name="Filter" args={{ clearable: true, filter: true }}>
    {#snippet template(args)}
        <Select
            {...args}
            data={[
                { label: "北京", value: "1" },
                { label: "上海", value: "2" },
                { label: "杭州", value: "3" },
                { label: "深圳", value: "4" },
                { label: "重庆", value: "5" },
            ]}
        />

        <Select
            {...args}
            multi
            placeholder="请选择"
            data={[
                { label: "北京", value: "1" },
                { label: "上海", value: "2" },
                { label: "杭州", value: "3" },
                { label: "深圳", value: "4" },
                { label: "重庆", value: "5" },
            ]}
        />
    {/snippet}
</Story>

<Story name="RemoteMethod" args={{ clearable: true, filter: true }}>
    {#snippet template(args)}
        <Select {...args} data={filterData} remoteMethod={remoteQuery} {loading} />
        <Select {...args} multi data={filterData2} remoteMethod={remoteQuery2} loading={loading2} />
    {/snippet}
</Story>

<Story name="DefaultLabel" args={{ clearable: true, filter: true }}>
    {#snippet template(args)}
        <Select {...args} data={filterData} value="1" defaultLabel="默认值" remoteMethod={remoteQuery} {loading} />
        <Select {...args} multi data={filterData2} value={[1]} defaultLabel={["值1"]} remoteMethod={remoteQuery2} loading={loading2} />
    {/snippet}
</Story>

<Story name="RenderOption">
    {#snippet template(args)}
        {#snippet renderOption(item: any)}
            <BothSide>
                <Space align="center">
                    <Avatar size={24} style="background: rgb(253, 227, 207); color: rgb(245, 106, 0)">{item.label.substr(0, 1)}</Avatar>
                    {item.label}
                </Space>
                <div>{item.value}</div>
            </BothSide>
        {/snippet}
        {#snippet renderSelectedItem(item: any)}
            <Space align="center">
                <Avatar size={24} style="background: rgb(253, 227, 207); color: rgb(245, 106, 0)">{item.label.substr(0, 1)}</Avatar>
                {item.label}
            </Space>
        {/snippet}
        <Select
            {renderOption}
            {renderSelectedItem}
            data={[
                { label: "北京", value: "1" },
                { label: "上海", value: "2" },
                { label: "杭州", value: "3" },
                { label: "深圳", value: "4" },
                { label: "广州", value: "5" },
            ]}
        />
    {/snippet}
</Story>

<Story name="Prefix">
    {#snippet template(args)}
        {#snippet prefix()}
            <Icon icon="f7:pin-fill" />
        {/snippet}
        <Select
            {prefix}
            data={[
                { label: "北京", value: "1" },
                { label: "上海", value: "2" },
                { label: "杭州", value: "3" },
                { label: "深圳", value: "4" },
                { label: "广州", value: "5" },
            ]}
        />
    {/snippet}
</Story>
<Story name="EmptyOption" args={{ emptyOption: "全部" }}>
    {#snippet template(args)}
        <Select
            {...args}
            data={[
                { label: "北京", value: "1" },
                { label: "上海", value: "2" },
                { label: "杭州", value: "3" },
                { label: "深圳", value: "4" },
                { label: "广州", value: "5" },
            ]}
        />
        <Select
            {...args}
            multi
            data={[
                { label: "北京", value: "1" },
                { label: "上海", value: "2" },
                { label: "杭州", value: "3" },
                { label: "深圳", value: "4" },
                { label: "广州", value: "5" },
            ]}
        />
    {/snippet}
</Story>

<Story name="Transfer" args={{ transfer: true }}>
    {#snippet template(args)}
        <Select
            {...args}
            data={[
                { label: "北京", value: "1" },
                { label: "上海", value: "2" },
                { label: "杭州", value: "3" },
                { label: "深圳", value: "4" },
                { label: "广州", value: "5" },
            ]}
        />
    {/snippet}
</Story>

<Story name="Status" args={{ status: "error" }}>
    {#snippet template(args)}
        <Select
            {...args}
            data={[
                { label: "北京", value: "1" },
                { label: "上海", value: "2" },
                { label: "杭州", value: "3" },
                { label: "深圳", value: "4" },
                { label: "广州", value: "5" },
            ]}
        />
    {/snippet}
</Story>

<Story name="Head" args={{ key: "component" }}>
    {#snippet template(args)}
        {@const list: any = {
            component: [
                { value: 'select', label: '选择器' },
                { value: 'tabs', label: '标签' },
                { value: 'avatar', label: '头像' },
                { value: 'button', label: '按钮' },
            ],
            design: [
                { value: 'color', label: '颜色' },
                { value: 'dark', label: '暗色模式' },
                { value: 'icon', label: '图标' },
                { value: 'font', label: '字体' },
            ],
            feedback: [
                { value: 'faq', label: '常见问题' },
                { value: 'join', label: '加入用户群' },
                { value: 'hornbill', label: '犀鸟反馈问题' },
            ],
        }}
        {#snippet header()}
            {@const tabOptions = [
                { itemKey: "component", label: "组件" },
                { itemKey: "design", label: "设计" },
                { itemKey: "feedback", label: "反馈" },
            ]}
            {@const tabStyleObj = {
                cursor: "pointer",
                "margin-right": "12px",
                "padding-bottom": "4px",
            }}
            {@const tabStyle = useStyle(
                {},
                {
                    cursor: "pointer",
                    "margin-right": "12px",
                    "padding-bottom": "4px",
                }
            )}
            {@const tabActiveStyle = useStyle({}, { ...tabStyleObj, "border-bottom": "1px solid var(--cui-color-primary)", "font-weight": 700 })}

            <div style="display: flex; padding-top: 8px; padding-left: 16px; border-bottom: 0.5px solid var(--cui-color-border)">
                {#each tabOptions as item}
                    {@const style = item.itemKey === args.key ? tabActiveStyle : tabStyle}
                    <div {style} onclick={() => (args.key = item.itemKey)}>
                        {item.label}
                    </div>
                {/each}
            </div>
        {/snippet}
        <Select data={list[args.key]} {header} />
    {/snippet}
</Story>

<Story name="Footer" args={{ key: "component" }}>
    {#snippet template(args)}
        {@const list: any = [
            { value: 'select', label: '选择器' },
            { value: 'tabs', label: '标签' },
            { value: 'avatar', label: '头像' },
            { value: 'button', label: '按钮' },
        ]}
        {#snippet footer()}
            <div style="padding-inline: 16px; background-color: var(--cui-color-fill-0); height: 36px; display: flex; align-items: center; justify-content: center; cursor: pointer">
                <Link>查询更多信息</Link>
            </div>
        {/snippet}
        <div style="width: 200px;">
            <Select data={list} {footer} />
        </div>
    {/snippet}
</Story>

<Story name="TriggerRender">
    {#snippet template(args)}
        {#snippet triggerRender(option: any)}
            <div style="min-width: 112px; height: 32px; display: flex; align-items: center; gap: 8px; padding-left: 8px; border-radius: 3px">
                {option["label"] || "请选择"}
                <Icon icon="f7:chevron-down" />
            </div>
        {/snippet}
        <Select
            {...args}
            {triggerRender}
            style="width: 200px"
            data={[
                { label: "北京", value: "1" },
                { label: "上海", value: "2" },
                { label: "杭州", value: "3" },
                { label: "深圳", value: "4" },
                { label: "广州", value: "5" },
            ]}
        />
    {/snippet}
</Story>

<Story name="LargeList">
    {#snippet template(args)}
        <Select {...args} filter data={largeArray} virtual />
    {/snippet}
</Story>
